<template>
	<view class="container">
		<!-- 公共模块，显示返回箭头和标题 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<view class="header">
			<text class="title" v-if="!isEditable">{{paperInfo.title}}</text>
			<input class="title-input" v-else v-model="paperInfo.title" placeholder="试卷标题" />

			<view class="score-info">
				<text v-if="!isEditable">分数: {{paperInfo.score}}</text>
				<view v-else class="edit-field">
					<text>分数:</text>
					<input v-model.number="paperInfo.score" type="number" class="number-input" />
				</view>

				<text v-if="!isEditable">击败比: {{paperInfo.rate}}</text>
				<view v-else class="edit-field">
					<text>击败比:</text>
					<input v-model="paperInfo.rate" class="number-input" />
				</view>
			</view>
		</view>

		<view class="module-stats">
			<view class="module-item">
				<text class="module-name">政治</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.politicsAccuracy}}</text>
					<input v-else v-model.number="paperInfo.politicsAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.politicsTime}}</text>
					<input v-else v-model.number="paperInfo.politicsTime" type="number" class="number-input" />
				</view>
			</view>
			<view class="module-item">
				<text class="module-name">常识</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.commonSenseAccuracy}}</text>
					<input v-else v-model.number="paperInfo.commonSenseAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.commonSenseTime}}</text>
					<input v-else v-model.number="paperInfo.commonSenseTime" type="number" class="number-input" />
				</view>
			</view>
			<view class="module-item">
				<text class="module-name">言语</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.languageAccuracy}}</text>
					<input v-else v-model.number="paperInfo.languageAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.languageTime}}</text>
					<input v-else v-model.number="paperInfo.languageTime" type="number" class="number-input" />
				</view>
			</view>
			<view class="module-item">
				<text class="module-name">数量</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.quantityAccuracy}}</text>
					<input v-else v-model.number="paperInfo.quantityAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.quantityTime}}</text>
					<input v-else v-model.number="paperInfo.quantityTime" type="number" class="number-input" />
				</view>
			</view>
			<view class="module-item">
				<text class="module-name">判断</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.judgmentAccuracy}}</text>
					<input v-else v-model.number="paperInfo.judgmentAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.judgmentTime}}</text>
					<input v-else v-model.number="paperInfo.judgmentTime" type="number" class="number-input" />
				</view>
			</view>
			<view class="module-item">
				<text class="module-name">资料</text>
				<view class="module-data-container">
					<text class="module-data-label">正确率:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.dataAccuracy}}</text>
					<input v-else v-model.number="paperInfo.dataAccuracy" type="number" class="number-input" />

					<text class="module-data-label">用时:</text>
					<text class="module-data-value" v-if="!isEditable">{{paperInfo.dataTime}}</text>
					<input v-else v-model.number="paperInfo.dataTime" type="number" class="number-input" />
				</view>
			</view>
		</view>

		<view class="summary">
			<text class="summary-title">整卷总结</text>
			<text class="summary-content" v-if="!isEditable">{{paperInfo.summary}}</text>
			<textarea class="summary-edit" v-else v-model="paperInfo.summary" placeholder="请输入整卷总结"></textarea>
		</view>

		<!-- 在summary下方添加保存和删除按钮 -->
		<view class="footer" v-if="isEditable">
			<button class="save-btn" @click="savePaperInfo">保存</button>
			<button class="delete-btn" @click="confirmDelete">删除</button>
		</view>

		<!-- 收藏按钮 -->
		<view class="right-buttons">
			<view class="add-collect-btn" @click="addCollect">
				<u-icon :name="isCollected ? 'heart-fill' : 'heart'" :color="isCollected ? 'red' : '#000'"
					:style="{'-webkit-text-stroke-width': isCollected ? '0px' : '1px', '-webkit-text-stroke-color': isCollected ? 'red' : '#000', 'color': isCollected ? 'red' : '#fff'}"
					size="36"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		examReviewDetail,
		collectAdd,
		examReviewEdit,
		examReviewDelete
	} from "@/config/api.js";
	export default {
		data() {
			return {
				title: '考试回顾',
				isEditable: false, // 控制编辑状态
				paperInfo: {
					paperName: '',
					score: 0,
					beatRate: '0%',
					politicsQuestionCount: 0,
					politicsAccuracy: 0,
					politicsTime: 0,
					commonSenseQuestionCount: 0,
					commonSenseAccuracy: 0,
					commonSenseTime: 0,
					languageQuestionCount: 0,
					languageAccuracy: 0,
					languageTime: 0,
					quantityQuestionCount: 0,
					quantityAccuracy: 0,
					quantityTime: 0,
					judgmentQuestionCount: 0,
					judgmentAccuracy: 0,
					judgmentTime: 0,
					dataQuestionCount: 0,
					dataAccuracy: 0,
					dataTime: 0,
					summary: ''
				},
				isLiked: false,
				isCollected: false,
				currentId: null // 新增变量来保存 id
			}
		},
		onLoad(options) {
			if (!options.id) {
				uni.showToast({
					title: '无效的试卷ID',
					icon: 'none'
				});
				return uni.navigateBack();
			}
			this.currentId = options.id; // 保存 id 到组件数据中
			this.loadData(options.id);

			// 新增判断是否从"我的复盘"进入
			if (options.from === 'my') {
				this.isEditable = true;
			}
		},
		methods: {
			async loadData(id) {
				try {
					const res = await examReviewDetail(id);
					if (res.code === 200) {
						const data = res.data;
						this.paperInfo = {
							title: data.paperName,
							score: data.score,
							rate: data.beatRate,
							politicsQuestionCount: data.politicsQuestionCount,
							politicsAccuracy: data.politicsAccuracy,
							politicsTime: data.politicsTime,
							commonSenseQuestionCount: data.commonSenseQuestionCount,
							commonSenseAccuracy: data.commonSenseAccuracy,
							commonSenseTime: data.commonSenseTime,
							languageQuestionCount: data.languageQuestionCount,
							languageAccuracy: data.languageAccuracy,
							languageTime: data.languageTime,
							quantityQuestionCount: data.quantityQuestionCount,
							quantityAccuracy: data.quantityAccuracy,
							quantityTime: data.quantityTime,
							judgmentQuestionCount: data.judgmentQuestionCount,
							judgmentAccuracy: data.judgmentAccuracy,
							judgmentTime: data.judgmentTime,
							dataQuestionCount: data.dataQuestionCount,
							dataAccuracy: data.dataAccuracy,
							dataTime: data.dataTime,
							summary: data.summary || '暂无总结'
						};
					}
				} catch (error) {
					console.error('加载数据出错:', error);
				}
			},
			// 新增收藏方法
			async addCollect() {
				try {
					const targetState = !this.isCollected; // 获取目标状态
					const res = await collectAdd({
						collectId: this.currentId,
						collectType: '模考复盘',
						isCollected: targetState ? 1 : 0 // 明确转换为1/0格式
					});
					if (res.code === 200) {
						this.isCollected = targetState; // 更新前端状态
						uni.showToast({
							title: targetState ? '收藏成功' : '取消收藏',
							icon: 'success'
						});
					} else if (res.code === 500 && res.msg === "用户已收藏") {
						this.isCollected = targetState; // 更新前端状态
						uni.showToast({
							title: targetState ? '收藏成功' : '取消收藏',
							icon: 'success'
						});
					}
				} catch (error) {
					console.error('收藏操作失败:', error);
					// 不需要手动回滚状态，因为操作失败时状态未改变
				}
			},

			// 新增保存方法
			async savePaperInfo() { // 方法名改为更贴切的savePaperInfo
				try {
					const res = await examReviewEdit({
						id: this.currentId,
						paperName: this.paperInfo.title,
						score: this.paperInfo.score,
						beatRate: this.paperInfo.rate,
						politicsQuestionCount: this.paperInfo.politicsQuestionCount,
						politicsAccuracy: this.paperInfo.politicsAccuracy,
						politicsTime: this.paperInfo.politicsTime,
						commonSenseQuestionCount: this.paperInfo.commonSenseQuestionCount,
						commonSenseAccuracy: this.paperInfo.commonSenseAccuracy,
						commonSenseTime: this.paperInfo.commonSenseTime,
						languageQuestionCount: this.paperInfo.languageQuestionCount,
						languageAccuracy: this.paperInfo.languageAccuracy,
						languageTime: this.paperInfo.languageTime,
						quantityQuestionCount: this.paperInfo.quantityQuestionCount,
						quantityAccuracy: this.paperInfo.quantityAccuracy,
						quantityTime: this.paperInfo.quantityTime,
						judgmentQuestionCount: this.paperInfo.judgmentQuestionCount,
						judgmentAccuracy: this.paperInfo.judgmentAccuracy,
						judgmentTime: this.paperInfo.judgmentTime,
						dataQuestionCount: this.paperInfo.dataQuestionCount,
						dataAccuracy: this.paperInfo.dataAccuracy,
						dataTime: this.paperInfo.dataTime,
						summary: this.paperInfo.summary
					});
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						});
						this.isEditable = false;
					}
				} catch (error) {
					console.error('保存失败:', error);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			},

			// 新增删除方法
			confirmDelete() {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这份复盘记录吗？删除后无法恢复',
					success: (res) => {
						if (res.confirm) {
							this.deletePaper();
						}
					}
				});
			},

			async deletePaper() {
				try {
					const res = await examReviewDelete(this.currentId);
					if (res.code === 200) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						// 触发列表页刷新事件
						uni.$emit('refreshReviewList');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				} catch (error) {
					console.error('删除失败:', error);
					uni.showToast({
						title: '删除失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.header {
		margin-bottom: 30rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.score-info {
		margin-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.score-info text {
		margin-right: 20rpx;
		font-size: 28rpx;
		color: #666;
	}

	.module-stats {
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.module-item {
		padding: 14rpx;
		display: flex;
		align-items: center;
	}

	.module-item:last-child {
		border-bottom: none;
	}

	.module-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-right: 20rpx;
		/* 减少和模块数据的距离 */
	}

	.module-data-container {
		display: flex;
		flex-wrap: wrap;
	}

	.module-data-label {
		font-size: 26rpx;
		color: #666;
		width: 75px;
		text-align: right;
		margin-right: 10rpx;
	}

	.module-data-value {
		font-size: 26rpx;
		color: #333;
		margin-right: 20rpx;
		width: 76rpx;
		text-align: right;
	}

	.summary {
		margin-top: 40rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.summary-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.summary-content {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
		display: block;
	}

	.right-buttons {
		position: fixed;
		right: 20rpx;
		top: 50%;
		transform: translateY(-60%);
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.add-like-btn,
	.add-collect-btn {
		/* 去掉外框背景 */
		background-color: transparent;
		border-radius: 0;
		width: auto;
		height: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* 新增保存按钮样式 */
	.footer {
		margin-top: 40rpx;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.save-btn {
		background-color: #007AFF;
		color: #fff;
		border-radius: 10rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
	}

	.delete-btn {
		background-color: #ff3b30;
		color: #fff;
		border-radius: 10rpx;
		font-size: 32rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 20rpx;
	}

	/* 新增编辑状态样式 */
	.title-input {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		width: 100%;
		padding: 10rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
	}

	.edit-field {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.edit-field input {
		width: 100rpx;
		margin-left: 10rpx;
		padding: 8rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
	}

	.summary-edit {
		width: 100%;
		min-height: 200rpx;
		margin-top: 10rpx;
		padding: 20rpx;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.module-data-edit {
		width: 80rpx;
		margin-right: 20rpx;
		padding: 4rpx;
		border: 1px solid #ddd;
		border-radius: 4rpx;
		text-align: center;
	}

	/* 新增数字输入框样式 */
	.number-input {
		font-size: 26rpx;
		color: #333;
		background: transparent;
		border: none;
		outline: none;
		width: 76rpx;
		text-align: right;
		padding: 0;
		margin-right: 20rpx;
		display: inline-block;
	}

	/* 优化编辑字段样式 */
	.edit-field {
		display: inline-flex;
		align-items: center;
		margin-right: 20rpx;
	}

	/* 优化标题输入框 */
	.title-input {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		width: 100%;
		background: transparent;
		border: none;
		outline: none;
		padding: 0;
		margin-bottom: 10rpx;
	}

	/* 优化总结输入框 */
	.summary-edit {
		width: 100%;
		min-height: 200rpx;
		margin-top: 10rpx;
		padding: 20rpx;
		background: transparent;
		border: 1px solid #eee;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
</style>